<template>
  <div class='z-editor'>
    <editor :id='tinymceId' v-model="tinymceHtml" :init='init'></editor>
    <el-upload v-show="false" class="upload-demo" 
    :action="imageUploadUrl" :on-success="handleSuccess" multiple 
    :before-upload="beforeUpload" :on-exceed="handleExceed" :show-file-list="false" :limit="10">
      <el-button size="small" id="btn-editor-upload" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import plugins from './model/plugins';
import toolbar from './model/toolbar';

export default {
  name: 'ZEditor',
  props: {
    /**
     * 高度
     */
    height: {
      type: Number,
      default: 300
    },
    /**
     * 工具栏
     */
    toolbar: {
      type: Array,
      default: () => []
    },
    /**
     * 图片上传地址
     */
    imageUploadUrl: {
      type: String,
      default: ''
    },
    /**
     * 是否显示图片上传按钮
     */
    showImageUpload: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示菜单栏
     */
    showMenuBar: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示状态栏
     */
    showStatusbar: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: null
    }
  },
  watch: {
    tinymceHtml(val) {
      this.$emit('input', val);
    },
    value(val) {
      this.tinymceHtml = val;
    }
  },
  data() {
    return {
      tinymceHtml: this.value,
      tinymceId: 'tinymce' + new Date().getMilliseconds(),
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: this.height,
        plugins: plugins,
        menubar: this.showMenuBar,
        statusbar: this.showStatusbar,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        branding: false,
        setup: editor => {
          if (this.showImageUpload) {
            // editor.addButton('imageUpload', {
            //   text: '上传图片',
            //   icon: 'image',
            //   tooltip: '上传图片',
            //   onclick: function() {
            //     document.getElementById('btn-editor-upload').click();
            //   }
            // });
          }
        }
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      const url = response.fileUrl;
      tinymce.get(this.tinymceId).insertContent(`<img  src="${url}" >`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件.`
      );
    },
    beforeUpload(file) {
      const isPicture = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPicture) {
        this.$message.error('上传图片只能是 jpg|png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isPicture && isLt2M;
    }
  },
  components: { Editor }
};
</script>

